<template>
    <div>
        <el-tree :props="props" :load="loadNode" lazy accordion @node-click="nodeClick">
        </el-tree>

    </div>
</template>

<script>
export default {
    data() {
        return {
            props: {
                label: 'name',
                children: 'zones',
                isLeaf: 'leaf'
            },
        };
    },
    methods: {
        nodeClick(data){
            // console.log(data, node)
            this.$emit('sendTreeData', data)
        },
        loadNode(node, resolve) {
            // console.log(node)
            if (node.level === 0) {
                this.$axios.get('/goods/category')
                    .then(res => {
                        // console.log(res.data)
                        return resolve(res.data.results);
                    })

            }
            if (node.level >= 1) {
                // console.log(node.data.cid)
                // console.log(`/goods/category/?id=${node.data.cid}`)
                this.$axios.get(`/goods/category/?id=${node.data.cid}`)
                .then(res => {
                    if (res.data.status === 200) return resolve(res.data.results)
                    else return resolve([])
                })
            }

        }
    }
}
</script>

<style>

</style>